<template>
	<view class="banner-pos">
		<view class="banner">
			<swiper class="swiper-main"
					autoplay="true"
					circular="true"
					interval="5000"
					duration="500"
					current="swiperCurrent"
					@change="swiperChange"
			>
				<swiper-item v-for="(item,index) in banList" :key="index" @click="handleClickDetail(item.link)">
					<image :src="item.image"></image>
					<view class="ban-title">
						<view class="ban-title-text">
							{{item.title}}
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>		
		<view class="dots">
			<view v-for="(i,n) in banList" :key="n" :class="[n == swiperCurrent ? 'active':'','dot']">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				swiperCurrent:0
			};
		},
		props:{
			banList:Array
		},
		methods:{
			//手动拖轮播图，与小圆点对应
			swiperChange(e){
				this.swiperCurrent = e.detail.current
			},
			//点击跳转页面
			handleClickDetail(id){
				var url = id.split('?')
				if(url[1]){
					var new2 = url[1].replace(/&/g,"---").replace(/=/g,"--")
					uni.navigateTo({
						url: '/pages/webview/webview?url='+url[0]+'&otrcan='+new2
					});
				}else{
					uni.navigateTo({
						url: '/pages/webview/webview?url='+id
					});
				}
				
			}
		},
		mounted(){
			//console.log(this.banList)
		}
	}
</script>

<style lang="scss">
	@import '../common/publish.scss';
	//@import "@/common/publish.scss"
	.banner-pos{
		position: relative;
		padding-bottom: 50upx;
	}
	.banner{
		position: relative;
		width: 100%;
		padding-bottom: 56.25%;
		box-shadow: 0 4px 6px 0 rgba(0,0,0,0.3);
		border-radius: 10upx;
		overflow: hidden;
	}
	.swiper-main{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: #ffffff ;
		swiper-item{
			background: #ffffff ;
		}
		image{
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}
	.ban-title{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 70upx;
		background:rgba(255,255,255,0.9);
		//height: 100%;
		// background:linear-gradient(to top,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%);
		.ban-title-text{
			position:absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 15upx 0 15upx 5upx;
			color: #275998;
			font-size: 30upx;
			min-height: 70upx;
			border-radius: 10upx;
			display: inline-block;
            @include text;	
		}
	}
	.dots{
	  position: absolute;
	  left: 0;
	  right: 0;
	  bottom: 10upx;
	  display: flex;
	  justify-content: center;
	  flex-direction: row;
	  padding-right: 10upx;
	}
	.dot{
	  margin: 0 8rpx;
	  width: 12upx;
	  height: 8upx;
	  background: #cacce3;
	  border-radius: 4upx;
	  // transition: all .6s;
	}
	.dot.active{
		width: 24upx;
		height: 8upx;
		border-radius: 4upx;
	  background: #116097;
	}
</style>
